<template>
  <PageContainer>
    <view class="container">
      <Header title="表单预览" :is-box-shadow="false" />
      <view class="header-box mb-16">
        <view class="form-title">{{ detailRef.title }}</view>
        <view class="form-desc">{{ detailRef.details }}</view>
        <view v-if="detailRef.endTime" class="fz-12">填写截止：{{ detailRef.endTime }}</view>
      </view>
      <BasicsForm style="background-color: #fff" :schemas="schemas" @register="register" />
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* serviceFormPreview 表单预览 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import BasicsForm from '@/components/Form/BasicsForm.vue';
  import { useForm, type FormSchema } from '@/components/Form';
  import { reactive, ref } from 'vue';
  import { onLoad } from '@/router';
  import { serviceTicketFormDetail } from '@/api/serviceForm';
  import { forEach } from 'lodash-es';
  import { localDataMapping } from '@/components/Form/hooks/useForm';

  const schemas = ref<FormSchema[]>([]);
  const [register, {}] = useForm({
    labelAlign: 'left',
    labelPosition: 'top',
    validateTrigger: 'bind',
  });

  const detailRef = reactive({
    title: '',
    details: '',
    endTime: '',
    serviceTicketFormId: 0,
  });
  onLoad<'serviceFormPreview'>((op) => {
    serviceTicketFormDetail(op.serviceTicketFormId).then((res) => {
      const list: FormSchema[] = [];
      forEach(res.formItemList, (v) => {
        list.push({
          field: v.id.toString(),
          label: v.showName,
          component: v.itemType,
          required: !!v.isRequired,
          componentProps: {
            placeholder: v.value,
            limit: v.itemType === 'UploadImg' ? 9 : void 0,
            localdata: localDataMapping(v.customFormItemAnswerList || [], {
              label: 'words',
              value: 'id',
            }),
          },
        });
      });
      schemas.value = [...list];
      detailRef.title = res.title;
      detailRef.details = res.details;
      detailRef.endTime = res.endTime;
    });
  });
</script>

<style lang="scss" scoped>
  .container {
    .header-box {
      height: fit-content;
      padding: 32rpx;
      display: flex;
      flex-direction: column;
      gap: 24rpx;
      color: #666664;
      background-color: #fff;
      .form-title {
        font-size: 32rpx;
        line-height: 48rpx;
        font-weight: bolder;
        color: #333;
        word-break: break-all;
      }
      .form-desc {
        font-size: 28rpx;
        line-height: 40rpx;
        white-space: pre-wrap;
      }
    }
  }
</style>
